<template>
  <div class="salary-view3">
    <h1>Salary View 3</h1>
    <my-salary ref="mySalaryInfo" :salary-info-pro="salarInfoPro"></my-salary>
    <el-button type="default" @click="useSalary">父组件查看薪水</el-button>
  </div>
</template>

<script setup lang="ts">
import MySalary from '@/components/salary/MySalary.vue';
import { ElButton } from 'element-plus';
import { reactive, ref } from 'vue';

// 定义ref对象引用子组件对象
const mySalaryInfo = ref()
// 定义传递对象，传递给子组件
const salarInfoPro = reactive({name: 'lucy', salary: 1500})

const useSalary = ():void => {
  console.log('SalaryView3.useSalary start')
  console.log(mySalaryInfo.value)
  console.log(mySalaryInfo.value.form.name)
  console.log(mySalaryInfo.value.form.salary)

  console.log('SalaryView3.useSalary end')
}
</script>

<style scoped>
.salary-view3 {
  padding: 20px;
}
</style>
